افرا گرافیک

آموزش bootstrap

 قسمت دوم

قبل از معرفی و استفاده از کلاس ها ی (استایل ها) بوت استرپ کد زیر را جهت responsive  کردن پروژه به صفحه مان اضافه می کنیم

<meta name="viewport" content="width=device-width, initial-scale=1">    

      .   بخش width=device-width  :

این بخش از کد جهت تنظیم عرض صفحه وب با عرض دستگاه های خروجی می باشد

• بخش   initial-scale=1 :

این بخش از کد میزان زوم اولیه را هنگامی که صفحه برای اولین بار load می شود تنظیم میکند

کلاس container  :

 این کلاس برای ساخت باکس کلی سایت استفاده خواهد شد و تمام کد ها درون این کلاس قرار خواهند گرفت ؛ این کلاس باکسی وسط چین و با عرض 1170 پیکسل را ایجاد میکند

کلاس container-fluid  :

این کلاس یک باکس با عرض فول اسکرین ایجاد میکند

کلاس row :

در بوت استرپ برای ایجاد یک سطر از کلاس row استفاده میشود و هر باکس یا row از صفحه مان را به 12 قسمت تقسیم می کند که این تقسیم بندی ها به وسیله کلاس   .col-*-* مشخص می شود

که بسته به اینکه عرض دستگاه مان چقدر است و صفحه ما چند ستونه است می توانیم کلاس های col را تغییر دهیم

• برای تعیین نوع دستگاه از چهار گزینه lg,md,sm,xs   استفاده می کنیم
• برای مشخص کردن تعدا ستون ها می توانیم 1 تا 12 ستون قرار دهیم

به مثال های زیر توجه کنید :

مثال اول :

مثال دوم :     

برای مشاهده سایر مطالب آموزشی ازwww.afragraphic.ir دیدن کنید.

تماس با ما: 66120694و66912056 و09122246022